<template>
  <div class="box">
    <div class="radio-box" v-if="props.id === 'stuffRank'">
      <el-button-group class="ml-4">
        <el-button
        class="el-button"
          @click="changeKy('sld')"
          size="small"
          :color="key === 'sld' ? 'rgba(193, 141, 31, 1)' : 'rgba(0, 88, 124, 1)'"
          >双落地</el-button
        >
        <el-button
          @click="changeKy('xs')"
          size="small"
          :color="key === 'xs' ? 'rgba(47, 194, 217, 1)' : 'rgba(0, 88, 124, 1)'"
          >线索</el-button
        >
      </el-button-group>
      <!-- <el-radio-group v-model="key" size="small">
        <el-radio-button label="双落地" value="sld" />
        <el-radio-button label="线索" value="xs"  />
      
      </el-radio-group> -->
    </div>
    <div
      :id="props.id"
      :style="{ height: props.id === 'stuffRank' ? '350px' : '270px' }"
    ></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, computed, ref } from "vue";
import { ElButtonGroup, ElButton, ElStep } from "element-plus";
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
  data: {
    type: Array,
    default: () => {
      return [];
    },
  },
  infoData: {
    type: Object,
    default: {},
  },
});

const key = ref("xs");

const changeKy = (val) => {
  key.value = val;
  initChart();
};
const getXisDate = () => {
  let arr = [];
  if (props.id === "stuffRank") {
    arr =
      key.value === "sld"
        ? props.infoData.sldRankings.slice(0, 12)
        : props.infoData.xsRankings.slice(0, 12);
  } else {
    arr = props.data;
  }
  return arr.map((item) => item.name);
};
const getSerData = () => {
  let arr = [];
  if (props.id === "stuffRank") {
    arr =
      key.value === "sld"
        ? props.infoData.sldRankings.slice(0, 12)
        : props.infoData.xsRankings.slice(0, 12);
  } else {
    arr = props.data;
  }

  return arr.map((item) => item.value);
};
const initChart = () => {
  const chartDom = document.getElementById(props.id);
  const myChart = echarts.init(chartDom);

  let option = {};

  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    textStyle: {
      color: "rgba(255, 255, 255, 0.6)",
      fontFamily: "Source Han Sans",
      fontSize: "18px",
      fontWeight: "normal",
    },
    grid: {
      top: "10%",
      left: "1%",
      bottom: "0",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: getXisDate(),
        axisLabel: {
          //interval设置成 0 强制显示所有标签
          interval: 0,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          //网格线
          show: false,
        },
      },
    ],

    legend: {
      show: props.id === "stuffRank",
      right: "5%",
      textStyle: {
        color: "rgba(255, 255, 255)",
      },
    },

    series: [
      {
        name: "客户数量",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        data: getSerData(),
        itemStyle: {
          // 使用方法一的写法
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(47, 194, 217, 1)" },

            { offset: 1, color: "rgba(14, 123, 200, 1)" },
          ]),
        },
      },
    ],
  };

  option && myChart.setOption(option);
};
onMounted(() => {
  initChart();
});
</script>

<style scoped>
#stuffRank,
#tztj2 {
  width: 100%;
}
.box {
  position: relative;
}
.radio-box {
  width: 150px;
  position: absolute;
  right: 200px;
  z-index: 99;
}
.el-button{
  color: #fff;
}
</style>
